<template>
<div class="down-modle" :class="this.$i18n.locale==='us'? 'module-english' : ''">
    <div class="smc-finance-warp">
        <div class="introduce-title">
            <img class="icon" src="../img/bar.png" />
            <span class="title">{{$t('smcFinance.down.title')}}</span>
        </div>
        <div class="introduce-box-body">
            <div class="introduce-box">
                <div class="box-title" style="background-image: url(../img/box-title.png)">{{$t('smcFinance.down.section1.title')}}</div>
                <div class="box-body">
                    <p class="text point">{{$t('smcFinance.down.section1.p1')}}</p>
                    <p class="text blue">{{$t('smcFinance.down.section1.p2')}}
                        （{{$t('smcFinance.up.ticketTip')}}）
                    </p>
                    <p class="text">{{$t('smcFinance.down.section1.p3')}}</p>
                    <p class="text point">{{$t('smcFinance.down.section1.p4')}}</p>
                    <p class="text">{{$t('smcFinance.down.section1.p5')}}</p>
                    <p class="text point">{{$t('smcFinance.down.section1.p6')}}</p>
                    <p class="text point">{{$t('smcFinance.down.section1.p7')}}</p>
                    <p class="text">{{$t('smcFinance.down.section1.p8')}}</p>
                    <p class="text">{{$t('smcFinance.down.section1.p9')}}</p>
                </div>
            </div>

            <div class="introduce-box">
                <div class="box-title" style="background-image: url(../img/box-title.png)">{{$t('smcFinance.down.section2.title')}}</div>
                <div class="box-body">
                    <p class="text">{{$t('smcFinance.down.section2.p3')}}</p>
                    <!--<p class="text">{{$t('smcFinance.down.section2.p4')}}</p>-->
                    <p class="text point">{{$t('smcFinance.down.section2.p5')}}</p>
                    <p class="text">{{$t('smcFinance.down.section2.p6')}}</p>
                    <p class="text point">{{$t('smcFinance.down.section2.p7')}}</p>
                    <p class="text">{{$t('smcFinance.down.section2.p8')}}</p>
                </div>
            </div>

            <div class="introduce-box">
                <div class="box-title" style="background-image: url(../img/box-title.png)">{{$t('smcFinance.down.section3.title')}}</div>
                <div class="box-body">
                    <p class="text">{{$t('smcFinance.down.section3.p2')}}</p>
                    <p class="text">{{$t('smcFinance.down.section3.p3')}}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="smc-finance-warp left">
        <div class="introduce-title">
            <img class="icon" src="../img/bar.png" />
            <span class="title">{{$t('smcFinance.down.team.title')}}</span>
        </div>
        <div class="introduce-body">
            <p class="text">{{$t('smcFinance.down.team.p1')}}</p>
            <p class="text">{{$t('smcFinance.down.team.p2')}}</p>
        </div>
    </div>

    <div class="smc-finance-warp right">
        <div class="introduce-title">
            <img class="icon" src="../img/bar.png" />
            <span class="title">{{$t('smcFinance.down.intro.title')}}</span>
        </div>
        <div class="introduce-body">
            <p class="text point">{{$t('smcFinance.down.intro.p1')}}</p>
            <p class="text">{{$t('smcFinance.down.intro.p2')}}</p>
            <p class="text">{{$t('smcFinance.down.intro.p3')}}</p>
            <p class="text point">{{$t('smcFinance.down.intro.p4')}}</p>
            <p class="text">{{$t('smcFinance.down.intro.p5')}}</p>
            <p class="text point">{{$t('smcFinance.down.intro.p6')}}</p>
            <p class="text">{{$t('smcFinance.down.intro.p7')}}</p>
        </div>
    </div>

    <div class="smc-finance-warp bottom">
        <div class="introduce-title">
            <img class="icon" src="../img/bar.png" />
            <span class="title">Q&A：</span>
        </div>
        <div class="introduce-body">
            <p class="text point">{{$t('smcFinance.down.qa.q1')}}</p>
            <p class="text">{{$t('smcFinance.down.qa.a1')}}</p>
            <p class="text point">{{$t('smcFinance.down.qa.q2')}}</p>
            <p class="text">{{$t('smcFinance.down.qa.a2')}}</p>
            <p class="text point">{{$t('smcFinance.down.qa.q3')}}</p>
            <p class="text">{{$t('smcFinance.down.qa.a3')}}</p>
        </div>
    </div>
</div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {

            };
        },
        props: {

        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
.down-modle {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 32px;

    .smc-finance-warp {
        height: auto;
        min-height: 300px;
        z-index: 10;

        .introduce-title {
            display: -webkit-flex;
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            height: 40px;
            text-align: left;

            .icon {
                display: inline-block;
                margin-right: 20px;
                height: 20px;
            }

            .title {

                font-size: 20px;
                font-weight: 600;
                color: #000;
                line-height: 40px;
            }
        }

        .introduce-box-body {
            display: -webkit-flex;
            display: flex;
            justify-content:center;

            .introduce-box {
                position: relative;
                margin: 0 10px;
                padding: 50px 20px;
                width: 400px;
                background-color: #fafafa;
                text-align: left;

                .box-title {
                    position: absolute;
                    width: 80px;
                    height: 50px;
                    top: -10px;
                    left: 40px;
                    color: #fff;
                    font-size: 16px;
                    text-align: center;
                    line-height: 45px;
                    background-size: 100% 100% ;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }

        .introduce-body {
            padding: 0 30px;
        }

        p.text {
            margin: 10px 0;
            font-size: 13px;;
            color: #a1a1a1;
            line-height: 1.6;
        }
        p.point {
            margin-top: 20px;
            color: #000;
            font-weight: 600;
        }
        p.blue {
            color: #1e97fc;
        }
    }

    .left {
        width: 470px;
        margin-left: 0;
    }

    .right{
        width: 700px;
        margin-right: 0;
    }

    .bottom {
        width: 1200px;
    }

}

.module-english {
    .smc-finance-warp {
        .introduce-box-body {
            .introduce-box {
                .box-title {
                    width: 140px;
                    font-size: 13px;;
                }
            }
        }
    }
}
</style>

















